﻿@page "/chart/histogram"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/histogram-chart'>Blazor Histogram Chart</a> example visualizes the student's results of the final examination with histogram series in the chart. Number of students between each interval is shown by using the data label.</p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, you can see how to render and configure the histogram type chart. The histogram type chart is a bar (column) chart used for frequency distribution in which the widths of the bars are proportional to classes into which variables have been divided and the heights of the bars are proportional to class frequencies.
        <code>DataLabel</code> property is used to represent individual data and its value.
    </p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the histogram series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/histogram'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Examination Result" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Minimum="0" Maximum="100" Title="Score of Final Examination">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Minimum="0" Maximum="50" Title="Number of Students">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" YName="Score" Type="ChartSeriesType.Histogram" BinInterval="20" ShowNormalDistribution="true" ColumnWidth="0.99">
                <ChartMarker Visible="true" Height="10" Width="10">
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont Color="#ffffff" FontWeight="600"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true" Header="Score"></ChartTooltipSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<HistogramData> ChartPoints { get; set; } = new List<HistogramData>
    {
        new HistogramData { Score = 5.250 },
        new HistogramData { Score = 7.750 },
        new HistogramData { Score = 0 },
        new HistogramData { Score = 8.275 },
        new HistogramData { Score = 9.750 },
        new HistogramData { Score = 7.750 },
        new HistogramData { Score = 8.275 },
        new HistogramData { Score = 6.250 },
        new HistogramData { Score = 5.750 },
        new HistogramData { Score = 5.250 },
        new HistogramData { Score = 23.000 },
        new HistogramData { Score = 26.500 },
        new HistogramData { Score = 27.750 },
        new HistogramData { Score = 25.025 },
        new HistogramData { Score = 26.500 },
        new HistogramData { Score = 28.025 },
        new HistogramData { Score = 29.250 },
        new HistogramData { Score = 26.750 },
        new HistogramData { Score = 27.250 },
        new HistogramData { Score = 26.250 },
        new HistogramData { Score = 25.250 },
        new HistogramData { Score = 34.500 },
        new HistogramData { Score = 25.625 },
        new HistogramData { Score = 25.500 },
        new HistogramData { Score = 26.625 },
        new HistogramData { Score = 36.275 },
        new HistogramData { Score = 36.250 },
        new HistogramData { Score = 26.875 },
        new HistogramData { Score = 40.000 },
        new HistogramData { Score = 43.000 },
        new HistogramData { Score = 46.500 },
        new HistogramData { Score = 47.750 },
        new HistogramData { Score = 45.025 },
        new HistogramData { Score = 56.500 },
        new HistogramData { Score = 58.025},
        new HistogramData { Score = 59.250},
        new HistogramData { Score = 56.750},
        new HistogramData { Score = 57.250},
        new HistogramData { Score = 46.250},
        new HistogramData { Score = 55.250},
        new HistogramData { Score = 44.500},
        new HistogramData { Score = 45.525},
        new HistogramData { Score = 55.500},
        new HistogramData { Score = 46.625},
        new HistogramData { Score = 46.275},
        new HistogramData { Score = 56.250},
        new HistogramData { Score = 46.875},
        new HistogramData { Score = 43.000},
        new HistogramData { Score = 46.250},
        new HistogramData { Score = 55.250},
        new HistogramData { Score = 44.500},
        new HistogramData { Score = 45.425},
        new HistogramData { Score = 55.500},
        new HistogramData { Score = 56.625},
        new HistogramData { Score = 46.275},
        new HistogramData { Score = 56.250},
        new HistogramData { Score = 46.875},
        new HistogramData { Score = 43.000},
        new HistogramData { Score = 46.250},
        new HistogramData { Score = 55.250},
        new HistogramData { Score = 44.500},
        new HistogramData { Score = 45.425},
        new HistogramData { Score = 55.500},
        new HistogramData { Score = 46.625},
        new HistogramData { Score = 56.275},
        new HistogramData { Score = 46.250},
        new HistogramData { Score = 56.875},
        new HistogramData { Score = 41.000},
        new HistogramData { Score = 63.000},
        new HistogramData { Score = 66.500},
        new HistogramData { Score = 67.750},
        new HistogramData { Score = 65.025},
        new HistogramData { Score = 66.500},
        new HistogramData { Score = 76.500},
        new HistogramData { Score = 78.025},
        new HistogramData { Score = 79.250},
        new HistogramData { Score = 76.750},
        new HistogramData { Score = 77.250},
        new HistogramData { Score = 66.250},
        new HistogramData { Score = 75.250},
        new HistogramData { Score = 74.500},
        new HistogramData { Score = 65.625},
        new HistogramData { Score = 75.500},
        new HistogramData { Score = 76.625},
        new HistogramData { Score = 76.275},
        new HistogramData { Score = 66.250},
        new HistogramData { Score = 66.875},
        new HistogramData { Score = 80.000},
        new HistogramData { Score = 85.250},
        new HistogramData { Score = 87.750},
        new HistogramData { Score = 89.000},
        new HistogramData { Score = 88.275},
        new HistogramData { Score = 89.750},
        new HistogramData { Score = 97.750},
        new HistogramData { Score = 98.275},
        new HistogramData { Score = 96.250},
        new HistogramData { Score = 95.750},
        new HistogramData { Score = 95.250}
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class HistogramData
    {
        public double Score { get; set; }
    }

}
